آموزش کار با Position ها در css

پاسخ هوش مصنوعی

برای ساخت زیر منو در HTML و CSS، استفاده از ویژگی های position به شما این امکان را می دهد که بتوانید کنترل دقیقی بر روی مکان و نحوه نمایش عناصر در صفحه داشته باشید.

استفاده از position: relative; به عنصر والد (منوی اصلی) اجازه می دهد که به عنوان مرجع برای موقعیت گذاری عنصر فرزند (زیر منو) عمل کند. این به این معناست که هنگامی که شما به آن عنصر فرزند position: absolute; نسبت می دهید، موقعیت آن نسبت به عنصر والد قرار می گیرد.

در زیر نمونه ای از کد HTML و CSS برای درک بهتر این موضوع آورده شده است:

<ul class="menu">
    <li>منو 1
        <ul class="submenu">
            <li>زیر منو 1</li>
            <li>زیر منو 2</li>
        </ul>
    </li>
    <li>منو 2</li>
</ul>

.menu {
    list-style-type: none;
}

.submenu {
    display: none; /* مخفی کردن زیر منو به طور پیش فرض */
    position: absolute; /* قرار دادن زیر منو نسبت به والد */
}

.menu li:hover .submenu {
    display: block; /* نمایش زیر منو در زمان قرار گرفتن ماوس روی منو */
}

.menu li {
    position: relative; /* تعیین موقعیت نسبت به زیر منو */
}

در این مثال، زیر منو تنها زمانی که ماوس بر روی منوی اصلی قرار دارد، نمایش داده می شود و موقعیت آن نسبت به عنصر والد خود (منوی اصلی) تعیین می شود.

شما باید ابتدا در مورد خاصیت ها و تفاوت های انواع Position ها در Css بدونید. وقتی که یک منو میخاید به همراه زیر منو ایجاد کنید زیر منو نمیتونه از یک محدود خاصی خارج بشه. چون اگر اون زیر منو از اون محدوده خارج بشه عملا دیگه زیر منو حساب نمیشه و باید دقیقا زیر منوی اصلی نمایش داده بشه.

خب وقتی میگیم Position = relative محدود این المنت با توجه به محدود المنتی که Position اون برابر با absolute هست تعیین میشه و دیگه از اون محدود خارج نمیشه و در همون محدود شناور میشه. اما اگر این Position ها مشخص نشه زیر منو در کل صفحه (body) شناور میشه و نمیتونیم دقیقا زیر منو ثابتش کنیم.

البته شما می تونید برای ایجاد منو از بوت استرپ هم استفاده کنید.

در ادامه براتون یک مثال از ساختن یک منو به همراه زیر منو که از Html و Css خالص استفاده شده رو مینویسیم.

کدهای مربوط به Html

<div id="navi">
            <!-- <nav> -->
            <ul id="mainmenu">
                <li>
                    <a href="#">About Us</a>

                </li>


                <li>
                    <a href="#">Contact Us</a>
                </li>
                <li>
                    <a href="#">Article</a>
                </li>
                <li>
                    <a href="#">News</a>

                    <ul id="submenu">
                        <li><a href="#">Sports</a></li>
                        <li>
                            <a href="#">Education &nbsp; &gt;</a>
                            <ul>
                                <li><a href="#">Univercity</a></li>
                                <li><a href="#">School</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
            <!-- </nav>-->
        </div>

کدهای مربوط به Css

#navi {
    margin: 0 auto;
    height: 40px;
    background-color: green;
    background: linear-gradient(rgb(55,100,20), rgb(200,200,200));
    width: 1000px;
    margin-bottom: 10px;
    border-radius: 2px;
    box-shadow: 5px 5px 5px 3px black;
}


#mainmenu {
    margin: 0 auto;
    width: 975px;
}